<style>
    .num{
        display: none;
        margin-left:100px;
    }
    .guage{
        display: none;
    }
    .add_guage{
        display:none;
    }
</style>
<div class="content">
    <div class="header">
        <h1 class="page-title">添加题目</h1>
    </div>
    <ul class="breadcrumb">
    </ul>


    <div class="container-fluid">
        <div class="row-fluid">

            <div class="btn-toolbar">
                <button class="btn btn-primary" onClick="location='<?php echo url('Admin/Index/topic_list'); ?>'"><i class="icon-list"></i> 题目列表</button>
                <div class="btn-group">
                </div>
            </div>
            <div class="well">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="home">
                        <form action="" method="post">
                            <label>题目标题</label>
                            <input type="text" name="top_title" value="" class="input-xxlarge">
                            <label>所属问卷</label>
                            <select name="top_questionnaireid"   class="top_questionnaireid input-xxlarge">
                                <?php foreach( $que_lsit as $key => $val ){ ?>
                                <option value="<?php echo $val['qu_id']; ?>"><?php echo $val['qu_title']; ?></option>
                                <?php } ?>
                            </select>
                            <label>所属大维度</label>
                            <select name="top_dimension"  class="dimension input-xxlarge">

                            </select>
                            <label>所属小维度</label>
                            <select name="top_second_dimension"  class="second_dimension input-xxlarge">

                            </select>
                            <label>所属部份</label>
                            <input type="number" name="top_section" value="" class="input-xxlarge">
                            <label>题目类型</label>
                            <select name="top_type"  class="input-xxlarge top_type">
                                <option value="1">单选</option>
                                <option value="2">多选</option>
                                <option value="3">填空</option>
                                <option value="4">量表</option>
                                <option value="5">跳转</option>
                            </select>
                            <!--单选&多选题-->
                            <section class="option" style="margin-left:100px;">
                                <label for="">选项1描述</label>
                                <input type="text" name="option[]">
                                <input type="number" placeholder="选项分数" class="dxt" name="option_grade[]">
                                <label for="">选项2描述</label>
                                <input type="text" name="option[]">
                                <input type="number" placeholder="选项分数"  class="dxt"  name="option_grade[]">
                                <label for="">选项3描述</label>
                                <input type="text" name="option[]">
                                <input type="number" placeholder="选项分数" class="dxt"   name="option_grade[]">
                                <label for="">选项4描述</label>
                                <input type="text" name="option[]">
                                <input type="number" placeholder="选项分数" class="dxt"   name="option_grade[]">
                            </section>
                            <!--跳转题-->
                            <section class="guage" style="margin-left:100px;">
                                <label for="">选项1描述</label>
                                <input type="text" name="option_grade[]">
                                <input type="number" name="guage_id[]" placeholder="跳转的id">
                                <label for="">选项2描述</label>
                                <input type="text" name="option_grade[]">
                                <input type="number" name="guage_id[]" placeholder="跳转的id">
                                <label for="">选项3描述</label>
                                <input type="text" name="option_grade[]">
                                <input type="number" name="guage_id[]" placeholder="跳转的id">
                                <label for="">选项4描述</label>
                                <input type="text" name="option_grade[]">
                                <input type="number" name="guage_id[]" placeholder="跳转的id">
                            </section>
                            <!--量表题-->
                            <section class="num">
                                <input style="width:100px;" type="text" class="input-xxlarge" placeholder="左边文字描述" name="top_left_text"> - <input style="width:100px;" placeholder="右边文字描述" type="text" class="input-xxlarge" name="top_right_text">
                                <br>
                                <input style="width:100px;" type="number" class="input-xxlarge" placeholder="最小数值" name="top_minnumber"> - <input style="width:100px;" placeholder="最大数值" type="number" class="input-xxlarge" name="top_maxnumber">
                                <br>
                                <input style="width:100px;" type="number" class="input-xxlarge" placeholder="得分间隔" name="top_interval">
                                <br>
                                <input type="checkbox" name="top_reverse" value="1" > 逆向得分
                            </section>
                            <div class="btn btn-primary add_option" style="margin-left:100px;width:120px;">增加新选项</div>
                            <div class="btn btn-primary add_guage" style="margin-left:100px;width:120px;">增加新选项</div>
                            <!--<label>题目分数</label>-->
                            <!--<input type="number" name="top_grade" value="" class="input-xxlarge">-->
                            <label>题目排序(从大排到小)</label>
                            <input type="text" value="0" name="top_order" value="" class="input-xxlarge">
                            <label>是否启用</label>
                            <input type="radio" checked name="top_status" value="1" class="input-xxlarge">是
                            <input type="radio" name="top_status" value="2" class="input-xxlarge">否
                            <label></label>
                            <input class="btn btn-primary" type="submit" value="提交" />
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Delete Confirmation</h3>
                </div>
                <div class="modal-body">

                    <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to delete the user?</p>
                </div>
            <script>
                //根据大维度找出所属的小维度
                function is_dim(dim_id,xwd_id){
                    url = '<?php echo url("Admin/Index/que_dim_second_list"); ?>?dim_id=' + dim_id
                    var data = {}
                    $.get(url,data,function (ev){
                        var str_second = '<option value="0">无</option>'
                        for(var i in ev){
                            str_second += "<option value='"+ ev[i].dim_id +"'>"+ ev[i].dim_name +"</option>"
                        }
                        if(str_second == ''){
                            str_second = '<option value="0">该大维度没有小维度</option>'
                        }
                        $('.second_dimension').html(str_second)
                        str_second = ""
                    },'json')
                }
                //获取该问卷所属的维度
                function wd_list(qu_id,dwd_id) {
                    var url = '<?php echo url("Admin/Index/que_dim_list"); ?>?qu_id=' + qu_id
                    var data = {}
                    //查出大维度
                    $.get(url,data,function (e){
                        var str = '<option value="0">无</option>'
                        var dim_id = e[0].dim_id

                        if(dwd_id){
                            dim_id = dwd_id
                            setTimeout(function (e){
                                $('.dimension ').val(localStorage.getItem('dimension'));//大维度
                            },300)

                        }

                        //根据查出第一个大维度所属的小维度
                        url = '<?php echo url("Admin/Index/que_dim_second_list"); ?>?dim_id=' + dim_id
                        $.get(url,data,function (ev){
                            var str_second = '<option value="0">无</option>'

                            for(var i in ev){
                                str_second += "<option value='"+ ev[i].dim_id +"'>"+ ev[i].dim_name +"</option>"
                            }

                            if(str_second == ''){
                                str_second = '<option value="0">该大维度没有小维度</option>'
                            } else {
                                setTimeout(function (e){
                                    $('.second_dimension').val(localStorage.getItem('second_dimension'));//小维度
                                },300)
                            }
                            $('.second_dimension').html(str_second)
                            str_second = ""
                        },'json')

                        for(var i in e){

                            str += "<option value='"+ e[i].dim_id +"'>"+ e[i].dim_name +"</option>"
                        }
                        if(str == ''){
                            str = '<option value="0">该问卷没有大维度</option>'
                        }
                        $('.dimension').html(str)
                        str = ""
                    },"json")
                }


                //缓存处理
                $('form').submit(function (){
                    var top_questionnaireid = $('.top_questionnaireid').val();//所问卷
                    var dimension = $('.dimension ').val();//大维度
                    var second_dimension = $('.second_dimension').val();//小维度
                    var top_section = $('input[name="top_section"]').val();//所属部分
                    var top_type = $('.top_type').val();//题目类型
                    var top_order = $('input[name="top_order"]').val();//题目排序

                    //量表题
                    var top_left_text = $('input[name="top_left_text"]').val();//左边文字
                    var top_right_text = $('input[name="top_right_text"]').val();//右边文字
                    var top_minnumber = $('input[name="top_minnumber"]').val();//最小数值
                    var top_maxnumber = $('input[name="top_maxnumber"]').val();//最小数值
                    var top_interval = $('input[name="top_interval"]').val();//得分间隔

                    //单选&多选
                    $('.dxt').each(function (e){
                        var name = "dxt"+e
                        localStorage.setItem( name , $(this).val() )
                    })

                    //做缓存
                    localStorage.setItem('top_questionnaireid',top_questionnaireid)
                    localStorage.setItem('dimension',dimension)
                    localStorage.setItem('second_dimension',second_dimension)
                    localStorage.setItem('top_section',top_section)
                    localStorage.setItem('top_type',top_type)
                    localStorage.setItem('top_order',top_order)
                    localStorage.setItem('top_left_text',top_left_text)
                    localStorage.setItem('top_right_text',top_right_text)
                    localStorage.setItem('top_minnumber',top_minnumber)
                    localStorage.setItem('top_maxnumber',top_maxnumber)
                    localStorage.setItem('top_interval',top_interval)



                    return true;
                })
                //如果有缓存
                $(function (){
                    setTimeout(function (e){
                        if( localStorage.getItem('top_questionnaireid') !== null ){
                            $('.top_questionnaireid').val(localStorage.getItem('top_questionnaireid'))
                            wd_list(localStorage.getItem('top_questionnaireid'),localStorage.getItem('dimension'))
//                            $('.dimension ').val(localStorage.getItem('dimension'));//大维度
//                            $('.second_dimension').val(localStorage.getItem('second_dimension'));//小维度
                            $('input[name="top_section"]').val(localStorage.getItem('top_section'));//所属部分
                            $('.top_type').val(localStorage.getItem('top_type'));//题目类型

                            if( localStorage.getItem('top_type') == 4 ){

                                $('.num').show()
                                $('.option').hide();
                                $('.add_option').hide();
                                $('.guage').hide()
                                $('.add_guage').hide()

                            } else if( localStorage.getItem('top_type') == 1 || localStorage.getItem('top_type') == 2 ) {

                                $('.dxt').each(function (e){
                                    var name = "dxt"+e
                                    $(this).val(localStorage.getItem( name  ))
                                })
                            }
                            $('input[name="top_order"]').val(localStorage.getItem('top_order'));//题目排序

                            //量表题
                            $('input[name="top_left_text"]').val(localStorage.getItem('top_left_text'));//左边文字
                            $('input[name="top_right_text"]').val(localStorage.getItem('top_right_text'));//右边文字
                            $('input[name="top_minnumber"]').val(localStorage.getItem('top_minnumber'));//最小数值
                            $('input[name="top_maxnumber"]').val(localStorage.getItem('top_maxnumber'));//最小数值
                            $('input[name="top_interval"]').val(localStorage.getItem('top_interval'));//得分间隔
                        }
                    },300)
                })
            </script>
            <script>
                $('.top_type').change(function (){

                    if( $(this).val() == 1 || $(this).val() == 2 )
                    {

                        $('.option').show();
                        $('.add_option').show();
                        $('.num').hide();
                        $('.guage').hide()
                        $('.add_guage').hide()

                    } else if( $(this).val() == 4 ) {

                        $('.num').show()
                        $('.option').hide();
                        $('.add_option').hide();
                        $('.guage').hide()
                        $('.add_guage').hide()

                    } else if( $(this).val() == 5 ){

                        $('.guage').show()
                        $('.num').hide()
                        $('.option').hide();
                        $('.add_option').hide();
                        $('.add_guage').show()

                    } else {

                        $('.num').hide();
                        $('.option').hide();
                        $('.add_option').hide();
                        $('.guage').hide()
                        $('.add_guage').hide()

                    }

                })

                //添加单选&多选
                var i = 5;
                $('.add_option').click(function (){
                    var str = '<label for="">选项'+i+'描述</label><input type="text" name="option[]"> <input type="number" placeholder="选项分数"  name="option_grade[]">'
                    $('.option').append(str);
                    i++;
                })

                //添加跳转
                var gi = 5;
                $('.add_guage').click(function (){
                    var str = '<label for="">选项'+gi+'描述</label><input type="text" name="option_guage[]"> <input type="number" name="guage_id[]" placeholder="跳转的id">">'
                    $('.guage').append(str);
                    gi++;
                })

            </script>
            <script>

                //一开始时修改所选维度
                var qu_id = $('.top_questionnaireid').val()
                wd_list(qu_id)

                //问卷修改时，修改可选维度
                $('.top_questionnaireid').change(function (){
                    var qu_id = $(this).val()
                    wd_list(qu_id)
                })

                $('.dimension').change(function (){
                    var str = ''
                    var dim_id = $(this).val()

                    is_dim(dim_id)
                })
            </script>